<template>
    <div class="main-wrapper"> 
        <div class="carousel-box" >
            <comm-carousel @detail-click="triggerCarousel"></comm-carousel>
        </div>
        <div class="tab"> 
            <span class="tab-item">每日推荐</span>
            <span class="tab-item">歌单</span>
            <span class="tab-item">排行榜</span>
            <span class="tab-item">电台</span>
            <span class="tab-item">mv</span>
        </div>
        <div class="common-box">
            <h3 class="sub-title">推荐歌单  <span class="more-btn" @click="moreSongList">查看更多</span></h3>
            <v-container fluid>
            <v-row>
            <v-col
              v-for="(item,i) in recommendData"
              :key="i"
              cols="4"
              md="4"
            >
                <song-list-item :data="item" @detail-click="playlistClick"></song-list-item>
            </v-col>
            </v-row>
            </v-container>
        </div>
        <div class="common-box">
            <h3 class="sub-title">热门歌单  <span class="more-btn" @click="moreSongList">查看更多</span></h3>
            <v-container fluid>
            <v-row>
            <v-col
              v-for="(item,i) in listData"
              :key="i"
              cols="4"
              md="4"
            >
                <song-list-item :data="item" @detail-click="playlistClick"></song-list-item>
            </v-col>
            </v-row>
            </v-container>
        </div>

        <v-lazy
            max-height="300"
            :options="{threshold: .5}"
        >
            <div class="common-box">
                <h3 class="sub-title">新歌速递  <span class="more-btn" @click="moreNewSong">查看更多</span></h3>
                <song-cell :data="newSongList"></song-cell>
            </div>
        </v-lazy>
    </div>
</template>

<script>
import api from '@/api/index'
import commCarousel from '@/components/common/commCarousel.vue'
import songCell from '@/components/songCell/songCell.vue'
import {musicMixin} from '@/utils/mixin'
import {getSomeData} from '@/utils/utils'
import SongListItem from '../../components/common/songList/songListItem.vue'

export default {
    components: {
        commCarousel,
        SongListItem,
        songCell
    },
    mixins: [musicMixin],
    data(){
        return {
            // bannerData: [],
            listData: [],
            recommendData: [], // 推荐歌单
            newSongList: [],
        }
    },
    methods: {
        triggerCarousel(data){
            this.setPlayInfo(data.song.id).then(res => {
                this.playMusic();
            });
            this.$router.push({
                path: '/control'
            })
        },
        moreSongList(){

        },

        playlistClick(data,e) {
            this.$router.push({
                path: '/songs',
                query: {
                    id: data.id
                }
            })
        },

        moreNewSong(){

        }
    },
    mounted(){
        
        // 热门歌单
        getSomeData({
            alias: 'listData'
        }, api.getJinPingList).then(res => {
            this.listData = res.data.playlists;
        })

        getSomeData({
            alias: 'recommendData'
        }, api.getRecommendList).then(res => {
            console.log(res.data);
            let result = res.data.result.map(item => {
                item.coverImgUrl = item.picUrl;
                return item;
            })
             this.recommendData = result;
        })

       

        api.getNewSongs().then((res)=>{
            console.log('NewSongs')
            this.newSongList = res.data.data.slice(0,6);
           
        })
        
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global';
    .main-wrapper {
        width: 100%;
        margin-bottom: px2rem(60);
        margin-top: px2rem(40);
        padding: px2rem(8);
        box-sizing: border-box;
        .tab {
            padding: px2rem(10) 0;
            display: flex;
            justify-content: space-between;
            .tab-item {
                display: inline-block;
                width: px2rem(54);
                height: px2rem(54);
                border-radius: 50%;
                background-color: #fff1f1;
                line-height: px2rem(54);
                color:#886464;
                font-size: px2rem(12);
                text-align: center;
            }
        }

        .common-box {
            margin-top: px2rem(10);
            .sub-title {
                @include defaultTitle;
                text-align: left;
                line-height: px2rem(32);
                .more-btn {
                    float: right;
                    font-size: px2rem(12);
                    font-weight: normal;
                }
            }
        }
    }
</style>